import React from 'react';
import { Empty } from 'antd';
import { ProCard } from '@ant-design/pro-card';
import { Line } from '@ant-design/plots';
import { StatisticsDataKind, ProjectStatisticDataType } from '@/types/dashboard';

type LineDataType = {
  kind: string;
  date: string;
  count: number;
}

type KindType = Record<StatisticsDataKind, string>;

const kindCnName: KindType = {
  'cqTasks': '需求任务',
  'tradeTasks': '交易任务',
  'workload': '工作量',
};


interface ProjectStatisticLineCardProps {
  statisticDatas: ProjectStatisticDataType[];
}
/**
 * 项目统计折线图
 */
const ProjectStatisticLineCard: React.FC<ProjectStatisticLineCardProps> = (props) => {

  const { statisticDatas } = props;
  let newData: LineDataType[] = [];
  statisticDatas.map((item: ProjectStatisticDataType) => {
    const { kind, date, count } = item;
    const data: LineDataType = {
      kind: kindCnName[kind],
      date,
      count
    }
    newData.push(data);
  });
  const config = {
    height: 350,
    data: newData,
    xField: 'date',
    yField: 'count',
    legend: {
      layout: 'horizontal',
      position: 'right'
    },
    colorField: 'kind',
    seriesField: 'kind',
    interaction: {
      tooltip: {
        marker: false,
      },
    }
  };

  return (
    <ProCard>
      {statisticDatas && statisticDatas.length > 0 ?
        <Line {...config} />
        : <Empty/>
      }
    </ProCard>
  );
}

export default ProjectStatisticLineCard;